<template>
  <view style="background-color: #F5F5F5;height: 100vh;">
    <navbar name="帮助与反馈"></navbar>
    <view class="chat-box">
      <view class="chart-tiem-box">
        {{year}}-{{month}}-{{day}} {{hoursTip}} {{hour}}:{{minute}}
      </view>
      <!-- 机器人 -->
      <view class="robot-box">
        <view class="robot-img">
          <u-lazy-load border-radius="50" height="100" img-mode="aspectFill"
            image="http://static.bsyjk.cn/l/53ACED47014743038358EA6AE67C1644.png"></u-lazy-load>
        </view>
        <view class="chat-content-box">
          <view class="chat-content">
            Hi,我是您的小助手，您有任何问题都可以找我哦！
          </view>
        </view>
      </view>
      <view class="robot-box">
        <view class="robot-img">
          <u-lazy-load border-radius="50" height="100" img-mode="aspectFill"
            image="http://static.bsyjk.cn/l/53ACED47014743038358EA6AE67C1644.png"></u-lazy-load>
        </view>
        <view class="chat-content-box">
          <view class="chat-content">
            猜你想问
          </view>
          <view class="function-list" v-for="(item,index) in list" :key="index" @tap="clickIssue(index)">
            {{item.problem}}
          </view>
          <view class="function-list">
            人工客服
            <button open-type="contact" bindcontact="handleContact" class="openChat"></button>
          </view>
          <view class="function-list" @tap="feedbackShow">
            我要吐槽
          </view>
        </view>
      </view>
      <view style="width:702upx;padding: 1upx 0upx;" v-for="(item,index) in answerList" :key="index">
        <view class="user-issue" v-if="item.status == 'me'">
          <view class="user-chat">
            <view class="user-chat-content">
              {{item.message}}
              <!-- 猜你想问第十六届法拉第是否了JFK是打开了附件是狄拉克附近开了多少 但是放假啊立刻发酵饲料亏大发 -->
            </view>
          </view>
          <view class="user-img">
            <u-lazy-load border-radius="50" height="100" img-mode="aspectFill"
              :image="handImg"></u-lazy-load>
          </view>
        </view>
        <view class="robot-box" v-if="item.status == 'robot'">
          <view class="robot-img">
            <u-lazy-load border-radius="50" height="100" img-mode="aspectFill"
              image="http://static.bsyjk.cn/l/53ACED47014743038358EA6AE67C1644.png"></u-lazy-load>
          </view>
          <view class="chat-content-box">
            <view class="chat-content">
              {{item.message}}
            </view>
          </view>
        </view>
        <view class="" style="width: 100%;height: 1upx;clear: both;"></view>
      </view>
    </view>
    <view class="loading-box">
      <u-loading :show="loadingone" color="#41ADBA" size="70"></u-loading>
    </view>
    <!-- 下发发送模块 -->
    <view class="send-box" @touchmove.stop.prevent="moveStop" v-show="isSendShow" :style="[{ 'bottom':keyBoardHeight + 'px'}]">
      <view class="input-box">
        <textarea class="input-text" :auto-height="true" :show-confirm-bar="false" :adjust-position="false" @blur="leaveInput"  @focus="testFocus" type="text" v-model="comment" value="" placeholder="请输入反馈内容" />
      </view>
      <view class="send-but" style="font-size: 26upx;color: #2EA7E0;" @click.stop="postfeedback">
        发送
      </view>
    </view>
    <view class="" style="height: 140upx;">
    </view>
  </view>
</template>

<script>
  // import navbars from '@/components/navigation.vue'

  import uLoading from "@/uview-ui/components/u-loading/u-loading.vue"

import uLazyLoad from "@/uview-ui/components/u-lazy-load/u-lazy-load.vue"

  export default {
    components: {
      uLazyLoad,
      uLoading,
      // navbars
    },
    data() {
      return {
        list: [],
        answerList: [], //对答界面
        loadingone: false, //加载中loading
        meSend: {
          img: '',
          message: '',
          status: 'me'
        }, //我问的
        robotAnswer: {
          img: '',
          message: '',
          status: 'robot'
        },
        year: '',
        month: '',
        day: '',
        hour: '',
        minute: '',
        srcond: '',
        hoursTip: '', //上午还是下午
        comment: '', //反馈信息
        isSendShow: false, //是否显示发送消息底部框
        keyBoardHeight:0,//距离底部距离
        handImg:'',//用户头像
      };
    },
    onLoad(e) {
      this.guessYouSpeak(); //获取猜你想说数据
      this.traversalTime(new Date().getTime()); //获取当前时间
      this.handImg = global.userInfo.avatarUrl;
    },
    methods: {
      //离开输入框触发
      leaveInput(e){
        this.keyBoardHeight = 0;
      },
      //点击输入框触发
      testFocus(e){
        console.log(e,'我是获取高度出现的问题')
        this.keyBoardHeight = e.target.height;
      },
      //我要吐槽
      feedbackShow() {
        this.isSendShow = true;
      },
      postfeedback() {
        if(this.comment == ''){
           this.$message.info('反馈内容不能为空');
           return;
        }
        this.loadingone = true;
        this.$api.post(global.apiUrls.feedbackApi, {
            feedContent: this.comment, //反馈信息
            position: 1, //位置: 1: 用户端 2: 门店3:平台端
            status: 0, //状态0：未解决 1：已解决 2：暂时无法解决
            userId: global.userInfo.userId, //用户id
          })
          .then(res => {
            console.log(res.data, '吐槽成功')
            if (res.data.code == 1000) {
              this.loadingone = false;
              this.meSend.message = this.comment; //赋值我想问的问题
              this.answerList.push(JSON.parse(JSON.stringify(this.meSend))); //我想问的问题
              this.$message.info('反馈成功！');
              setTimeout(() => {
                uni.pageScrollTo({
                  scrollTop: 99999999999,
                  duration: 0
                });
              }, 200)
              this.isSendShow = false;
              setTimeout(() => {
                this.comment = ''; //反馈成功后清除反馈信息
              }, 500);
            } else {
              this.loadingone = false;
            }
          }).catch(err => {
            this.loadingone = false;
            // this.$message.info('加载失败请稍后再试')
            console.log(res)
          })
      },
      traversalTime(timestamp) {
        //timestamp(时间戳)是整数，否则要parseInt转换
        var time = new Date(timestamp);
        var y = time.getFullYear();
        var m = time.getMonth() + 1;
        var d = time.getDate();
        var h = time.getHours();
        var mm = time.getMinutes();
        var s = time.getSeconds();
        this.year = y;
        this.month = m;
        this.day = d;
        this.hour = h;
        this.minute = mm;
        this.srcond = s;
        if (h >= 0 && h < 12) {
          this.hoursTip = "上午"
        } else if (h >= 12 && h < 18) {
          this.hoursTip = "下午"
        } else {
          this.hoursTip = "晚上"
        }
      },
      //获取机器人数据
      guessYouSpeak() {
        this.loadingone = true;
        this.$api.get(global.apiUrls.guessYouSpeak, {
            position: 1, //位置: 1: 用户端 2: 门店
          })
          .then(res => {
            console.log(res.data, '猜你想说列表')
            if (res.data.code == 1000) {
              this.list = res.data.result.records; //赋值猜你想问
              this.loadingone = false;
            } else {
              this.loadingone = false;
            }
          }).catch(err => {
            this.loadingone = false;
            // this.$message.info('加载失败请稍后再试')
            console.log(res)
          })
      },
      //点击问题查看答案
      clickIssue(index) {
        this.meSend.message = this.list[index].problem; //赋值我想问的问题
        this.robotAnswer.message = this.list[index].answer; //赋值机器人回答的问题
        this.answerList.push(JSON.parse(JSON.stringify(this.meSend))); //我想问的问题
        this.loadingone = true;
        setTimeout(() => {
          this.answerList.push(JSON.parse(JSON.stringify(this.robotAnswer))); //机器人的回答
          this.loadingone = false;
          setTimeout(() => {
            uni.pageScrollTo({
              scrollTop: 99999999999,
              duration: 0
            });
          }, 200)
        }, 1000);
      },
    }
  }
</script>

<style lang="scss">
  page{
    background-color: #F5F5F5 !important;
  }
  .chat-box {
    padding: 24upx 24upx;
    background-color: #F5F5F5;

    .chart-tiem-box {
      width: 100%;
      text-align: center;
      font-size: 24upx;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #9B9B9B;
      line-height: 14upx;
      padding: 24upx 0;
    }

    //机器人
    .robot-box {
      width: 100%;
      display: flex;
      margin-top: 40upx;
      padding: 1upx 0upx;
      clear: both;
      .robot-img {
        width: 100upx;
        height: 100upx;
      }

      /**************************/
      .chat-content-box {
        max-width: 500upx;
        display: inline-block;
        padding: 21upx 19upx 30upx 23upx;
        border-radius: 24upx 24upx 24upx 0upx;
        box-sizing: border-box;
        font-size: 28upx;
        color: #FFFFFF;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 60upx;
        background: #FFFFFF;
        position: relative;
        float: left;
        background: #FFFFFF;
        margin-left: 22upx;

        .chat-content {
          font-size: 28upx;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4A4A4A;
          line-height: 36upx;
        }

        .function-list {
          max-width: 514upx;
          font-size: 24upx;
          font-family: PingFangSC-Regular, PingFang SC;
          font-weight: 400;
          color: #2EA7E0;
          line-height: 48upx;
          position: relative;
          .openChat{
            top: 0;
            left: 0;
          	position: absolute;
          	width: 100%;
          	height: 100%;
          	opacity: 0;
          	z-index: 999;
          }
        }
      }

      .chat-content-box::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        bottom: -24rpx;
        left: 0;
        border-top: 24upx solid #FFFFFF;
        border-right: 40upx solid transparent;
        // background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
      }

    }

    //用户问题
    .user-issue {
      float: right;
      display: flex;
      // justify-content: right;
      clear: both;
      // justify-content: space-between;
      right: 0;
      margin: 40upx 0upx;
      // padding: 1upx 0upx;

      .user-img {
        width: 100upx;
        height: 100upx;
      }

      .user-chat {
        max-width: 500upx;
        display: inline-block;
        padding: 21upx 19upx 30upx 23upx;
        border-radius: 24upx 24upx 0 24upx;
        box-sizing: border-box;
        font-size: 28upx;
        color: #FFFFFF;
        font-family: PingFangSC-Medium, PingFang SC;
        font-weight: 500;
        line-height: 60upx;
        background: #FFFFFF;
        position: relative;
        float: right;
        background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
        margin-right: 22upx;
      }

      .user-chat::before {
        content: '';
        width: 0;
        height: 0;
        position: absolute;
        bottom: -24rpx;
        right: 0;
        border-top: 24upx solid #2EA7E0;
        border-left: 40upx solid transparent;
        // background: linear-gradient(112deg, #81C042 0%, #2EA7E0 100%);
      }
    }
  }

  //发送 模块
  .send-box {
    position: fixed;
    width: 100%;
    background-color: #FFFFFF;
    display: flex;
    align-items: center;
    padding: 18upx 32upx;
    justify-content: space-between;

    .input-box {
      width: 90%;
      min-height: 64upx;
      max-height: 600upx;
      background: #F4F4F4;
      border-radius: 40upx;
      padding: 15upx 0upx;

      .input-text {
        width: 100%;
        padding: 0 25upx;
        font-size: 28upx;
        line-height: 34upx;
      }

      .send-but {
		  width: 10%;
		  

      }

    }
  }
</style>
